<template>
  <div class="category_box">
    <div class="category" v-for="item in navigationForm">
      <img class="category_Img" :src="item.logo">
      <span class="category_Name">{{item.name}}</span>
    </div>
  </div>
</template>

<script>
  import {list} from '@/api/navigation';
  import {mapGetters} from 'vuex';
  import utils from '../../../../utils/utils.js'
  export default {
    data() {
      return {
        navigationForm: [
          {
            name: '线上课程',
            img: 'http://cdn.rzico.com/img/022-lesson.png'
          },
          {
            name: '面授课程',
            img: 'http://cdn.rzico.com/img/049-teacher-2.png'
          },
          {
            name: '专家评估',
            img: 'http://cdn.rzico.com/img/100-professor-1 (1).png'
          },
          {
            name: '心理测评',
            img: 'http://cdn.rzico.com/img/052-task.png'
          },
          {
            name: '心理测评',
            img: 'http://cdn.rzico.com/img/052-task.png'
          },
          {
            name: '线上课程',
            img: 'http://cdn.rzico.com/img/022-lesson.png'
          },
          {
            name: '面授课程',
            img: 'http://cdn.rzico.com/img/049-teacher-2.png'
          },
          {
            name: '专家评估',
            img: 'http://cdn.rzico.com/img/100-professor-1 (1).png'
          },
          {
            name: '心理测评',
            img: 'http://cdn.rzico.com/img/052-task.png'
          },
          {
            name: '心理测评',
            img: 'http://cdn.rzico.com/img/052-task.png'
          },
        ],
        pageNum: 1,
        pageSize: 10,
        tagIds:[]
      }
    },
    created(){
      this.loadNavigation()
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    props:[
      'content'
    ],
    methods:{
      loadNavigation() {
        var _this = this
        console.log(this.content)
        if (!utils.isNull(this.content.tagids)) {
          this.tagIds = this.content.tagids.split(',');
          for (var i = 0; i < _this.tagIds.length; i++) {
            _this.tagIds[i] = parseInt(_this.tagIds[i])
          }
        }
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('mchId', this.mchId);
        for (var i = 0; i < _this.tagIds.length; i++) {
          params.append('tagIds',_this.tagIds[i])
        }
        list(params).then(response => {
          response.data.data.forEach(item=>{
            if (utils.isNull(item.logo)){
              item.logo='http://cdnx.hulu.fj.cn/upload/20200624/4.png'
            }
            if (utils.isNull(item.name)){
              item.name="专家评估"
            }
          })
          if(response.data.data.length>0){
            _this.navigationForm = response.data.data
          }
          _this.navigationForm.forEach(function (item) {
            item.logo = utils.thumbnail(item.logo,270,200)
          })
        }).catch(error => {
          console.log('error!!')
        });
      },
    }
  }
</script>

<style scoped>
  .category_box {

    width: 355px;
    padding-top: 25px;
    padding-left: 9px;
    padding-right: 9px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    background-color: white;
    margin-left: 10px;
    border-radius: 6px;
  }

  .category {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 67px;
    margin-bottom: 25px;
  }

  .category_Img {
    width: 36px;
    height: 36px;
  }

  .category_Name {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: rgba(43, 43, 43, 1);
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }
</style>
